<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Jquery实现手风琴的切换效果</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="../lib/jquery-1.12.2.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style: none;
        }
        
        p {
            text-align: center;
            padding-top: 30px;
            font-size: 18px;
            color: orange;
        }
        
        .menu_tab {
            margin: 10px auto;
            width: 300px;
            height: auto;
            border: 1px solid #000000;
        }
        
        label {
            display: block;
            color: #fff;
            background: #728bbb;
            font-size: 14px;
            padding: 10px 0 10px 25px;
            border-bottom: 0.5px solid #97bdf4;
        }
        
        label::after {
            content: "+";
            font-size: 14px;
            float: right;
            margin-right: 15px;
        }
        
        label.selected::after {
            content: '-';
        }
        
        .tab_content {
            display: none;
            font-size: 15px;
            padding: 10px 20px;
            color: #35c628;
            text-align: center;
        }
    </style>
    <script type="text/javascript">
        // 导航栏menu_tab切换
        $(function() {
            $('.menu_tab').find('ul li:first-child').children('.tab_content').show(); //首行内容默认显示
            $(".menu_tab > ul > li").on("click", "label", function() {

                $(this).toggleClass('selected').next('.tab_content').slideToggle(500);
                $(this).parent().siblings().children('.tab_content').slideUp(500);
                $(this).parent().siblings().children('label').removeClass('selected');

                $("html,body").animate({
                    scrollTop: 0
                }, 500); // 切换menu_tab，整块内容移动到顶部
            });
        });
    </script>
</head>

<body>
    <p>Jquery简单的手风琴样式切换</p>
    <div class="menu_tab">
        <ul>
            <li>
                <label class="tab selected">内容显示 1</label>
                <div class="tab_content">

                </div>
            </li>
            <li>
                <label class="tab">内容显示 2</label>
                <div class="tab_content" style="color:red;">

                </div>
            </li>
            <li>
                <label class="tab">内容显示 3</label>
                <div class="tab_content" style="color:blue;">

                </div>
            </li>
        </ul>
    </div>
</body>

</html>
--------------------- 作者：冯冯墨墨 来源：CSDN 原文：https://blog.csdn.net/qq_33072593/article/details/78622112 版权声明：本文为博主原创文章，转载请附上博文链接！